<!DOCTYPE html>
<html lang="en">
    <head>
        <title>熊熊大火燃烧的粒子效果</title>
        <meta charset="utf-8">
        <script src="jquery-1.7.2.min.js"></script>
        <script src="Particleground.js"></script>
        <style>
            body{
                height:100%;
                background:#16a085;
                overflow:hidden;
                width: 1920px;
                height: 972px;
            }
            canvas{
                z-index:1;
                position:absolute;
            }
            #fire{
                font-family: "Comic Sans MS";
                font-size: 80px;
                top:25%;
                left:35%;
                color: white;
                z-index: 2;
                position: absolute;
                }
        </style>
    </head>
    <body>
        <h1 id="fire">燃烧的粒子效果</h1>
        <canvas class="pg-canvas" width="1920" height="972"></canvas>
        <script>
            $(document).ready(function() {
                $('body').particleground({
                    dotColor: '#5cbdaa',
                    lineColor: '#5cbdaa'
                });
                $('#fire').css('text-shadow','0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e');
                setInterval(function(){
                    $('#fire').css('text-shadow','0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -'+ Math.random()*100 +'px 40px #ffae34, 20px -'+ Math.random()*150 +'px 50px #ec760c, -20px -'+ Math.random()*150 +'px 60px #cd4606, 0 -'+ Math.random()*100 +'px 70px #973716, 10px -'+ Math.random()*150 +'px 80px #451b0e');
                },120);
                //可以控制时间和相应的随机数，调出适合的燃烧效果
            });
        </script>
    </body>
</html>